p<template>
  <div class="admin">
    <el-button class="top" @click="$router.push('/addBanner')" type="primary"
      >添加</el-button
    >
    <el-table
      :data="bannerList"
      row-key="id"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      style="width: 100%"
    >
      <el-table-column prop="id" label="编号" width="180">
      </el-table-column>
      <el-table-column prop="title" label="轮播图标题" width="180">
      </el-table-column>
      <el-table-column label="图片" width="280">
        <template #default="{ row: { img } }">
          <img class="img" :src="$pregImg + img" alt="" />
        </template>
      </el-table-column>
      <el-table-column label="状态" width="180">
        <template #default="{ row: { status } }">
          <el-tag type="success" vla>正常</el-tag>
          <el-tag type="danger" v-show="status === 2">禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row: { id } }">
          <el-button
            type="primary"
            @click="$router.push({ path: '/setBanner', query: { id } })"
            size="mini"
            >编辑</el-button
          >
          <el-button type="danger" size="mini" @click="del(id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import {  getBannerList, delBannerApi } from "@/api/banner.js";
export default {
  data() {
    return {
      bannerList: [],
    };
  },
  async mounted() {
    this.getList();
  },
  methods: {
    async del(id) {
      let res = await delBannerApi(id);
      if (res.code == 200) {
        alert(res.msg);
        this.getList();
      } else {
        alert(res.msg);
      }
    },
    //获取列表
    async getList() {
      let res = await getBannerList();
      this.bannerList = res.list;
      console.log(res);
    },

  },
};
</script>
<style lang="less" scoped>
.admin {
  .el-pagination {
    text-align: right;
    margin: 10px;
  }
  .top {
    margin-bottom: 20px;
  }
}
.miaoshu {
  display: inline-block;
  padding: 5px;
  margin: 0 8px 0 0;
  background: skyblue;
  border-radius: 3px;
}
.img {
  width: 180px;
}
</style>

